<template>
	<view class="container">
		<image :src="imgUrl+info.image" mode="" class="image"></image>
		<view class="box">
			<ul>
				<li>
					<text>名称：</text>
					{{info.gradeName}}
				</li>
				<li>
					<text>折扣：</text>
					{{info.dz}}
				</li>
				<li>
					<text>有效期：</text>
					{{info.year}}年
				</li>
			</ul>
			<!-- <view class="title">会员详情</view> -->
			<view class="content">
				<view v-html="info.remark"></view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="bot">
				<view class="setPrice">
					￥{{info.setPrice}}
				</view>
				<view class="btn">
					<button @click="handleKt(info)" v-if="isShow">我要开通</button>
					<view v-if="!isShow" class="yjkt">
						您已开通
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { memberDetails} from '@/api/member.js'
	import { userInfo,getHyInfo } from '@/api/api.js'
	import { getPay,getEnrollTran } from '@/api/pay.js'
	import { fxUser } from '@/api/fx.js'
	import config from '@/config'
	export default {
		data() {
			return {
				imgUrl:config.baseUrl,
				info:{},
				user:{},
				openid:"",
				token:"",
				isShow:true,
				id:"",
				paymentTrade:"",
				phone1:"vvvv",
				data:{}
			}
		},
		onLoad(options) {
			console.log('onLoad options:', options);
			let that = this
			debugger
			that.data = options
			that.getDetails(options.id)
			that.id = options.id
			that.phone1 = options.phone
				uni.getStorage({
			    key: 'data1',
			    success: function (res) {
					that.token = res.data.token
					that.openid = res.data.openid
					// 查询用户信息表中是否有该手机号
					userInfo(res.data.phone).then((res) => {
						that.user = res.info
						if(that.user){
							that.getHyInfo(res.info.id)
						}
					  })
			    }
			});
		},
		methods: {
			// 查看详情
			getDetails(id) {
				console.log('this.phone1this.phone1this.phone1this.phone1',this.phone1)
				memberDetails(id).then((res) => {
					if(res.data){
						this.info = res.data
					}
				  })
			},
			
			// 根据获取到的人员id去查询是否存在该会员
			getHyInfo(id){
				let data = {
					id:id
				}
				getHyInfo(data).then((res) => {
					if(res.info.u_id == this.id&&!res.info.hyState){
						this.isShow = false
					}else if(!res.info){
						this.isShow = false
					}else{
						this.isShow = true
					}
				  })
			},
			
			handleKt(item){
				if(this.token){
					let that = this
					let temp = {
					  hname:that.info.gradeName,
					  name:that.user.userName,
					  phone:that.user.phone,
					  card:that.user.card,
					  price : that.info.setPrice,
					  openid:that.openid,
					  payment_type:3,
					  hid:that.info.id,
					};
					temp.userPhone = that.phone1
					temp.hy = that.id
					// 支付订单
					getPay(temp).then((res) => {
						// 商户号
						that.paymentTrade = res.dataInfo
						 // 调起支付接口
						 uni.requestPayment({
							provider: "wxpay",
							appid: res.data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
							package: res.data.package, // 固定值
							paySign: res.data.paySign, //签名
							signType: res.data.signType, // 签名算法，这里用的 MD5/RSA 签名
							nonceStr: res.data.nonceStr, // 随机字符串
							success(res) {
								if (res.errMsg == "requestPayment:ok") {
									console.log('temptemptemptemp',temp)
										fxUser(temp).then((res) => {
									})
									uni.showToast({
										title: '开通成功',
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
									  uni.reLaunch({
										url: '/pages/index/index'
									   });
									}, 1000);
								}
							},
							fail(e) {
								if (e.errMsg == "requestPayment:fail cancel") {
									uni.showToast({
											title: '取消支付',
											icon: 'none',
										});
								} else {
									uni.showToast({
											title: '取消失败',
											icon: 'error',
										});
										}
									}
								})
					 })
				}else{
					this.toLogin()
				}
			},
			// 去登录
			toLogin(){
				uni.navigateTo({
					url: '../login/login',
				});
			},
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.image{
		width: 100%;
		height: 340rpx;
	}
	
	.box{
		width: 95%;
		margin: 20rpx auto 0;
		font-weight: 300;
	}
	
	.box ul{
		padding: 20rpx;
		border: 1px solid #698376;
	}
	
	.box ul li{
		font-size: 24rpx;
		line-height: 45rpx;
	}
	
	.box ul li text{
		font-size: 28rpx;
		color: #698376;
		font-weight: 400;
	}
	
	.content{
		font-size: 26rpx;
		font-weight: 300;
		padding: 20rpx;
		margin-top: 20rpx;
		border: 1px solid #698376;
		background: #fff;
	}
	
	/* .title{
		font-size: 26rpx;
		color: #698376;
		font-weight: 400;
		margin: 20rpx 0 5rpx;
	} */
	
	.content{
		line-height: 62rpx;
	}
	
	.bot{
		display: flex;
		box-shadow: 1px 1px 10px #ddd;
		position: fixed;
		bottom: 0;
		left:0;
		width: 95%;
		padding: 20rpx;
		background-color: #fff;
	}
	
	.setPrice{
		margin-top: 10rpx;
		font-size: 34rpx;
	}
	
	.btn{
		margin-left: auto;
	}
	
	.btn button{
		width: 200rpx;
		font-size: 26rpx;
		border: 1px solid #698376;
		background-color: #fff;
		color: #698376;
	}
	
	.yjkt{
		padding: 10rpx 15rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
		background-color: #ddd;
		color: #fff;
	}
	
	.fkpopupBox{
		width: 500rpx;
		background-color: #fff;
	}
</style>